<template>
  <el-row :gutter="20">
    <el-col :span="12" :offset="0">
      <el-form-item label="设备:" prop="deviceInfo">
        <el-select
          v-model="deviceInfo"
          multiple
          size="small"
          collapse-tags
          placeholder="请选择"
          class="w100"
          @change="devCascader"
        >
          <el-option
            v-for="item in treedata"
            :key="item.device.token"
            :label="item.device.name"
            :value="item.device.token"
          >
          </el-option>
        </el-select>
      </el-form-item>
    </el-col>
    <el-col :span="24" :offset="0" style="margin-top: 10px">
      <el-table :data="tabData" border>
        <el-table-column prop="deviceTypeName" label="设备类型">
          <template slot-scope="scope">
            {{ scope.row.device.deviceType.name }}
          </template>
        </el-table-column>
        <el-table-column
          prop="deviceName"
          label="设备编号"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            {{ scope.row.device.name }}
          </template>
        </el-table-column>

        <el-table-column prop="" label="装炉数量">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.feedCount"
              placeholder="请输入"
              size="small"
            />
          </template>
        </el-table-column>
        <el-table-column
          prop=""
          label="操作"
          align="center"
          width="80"
          fixed="right"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              size="mini"
              icon="el-icon-delete"
              @click="handDelete(scope.row, scope.$index)"
            />
          </template>
        </el-table-column>
      </el-table>
    </el-col>
  </el-row>
</template>

<script>
import _ from "lodash";
export default {
  name: "equipment",
  props: {
    treedata: {
      type: Array,
      default: () => []
    },
    deviceInfoListModel: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      is_cascader: Math.random(), // 重新渲染标识key
      deviceInfo: [],
      tabData: [],
      props: {
        multiple: true,
        value: "token",
        label: "name",
        children: "deviceList"
      }
    };
  },

  watch: {
    deviceInfoListModel: {
      handler: function(newData, oldData) {
        const data = _.cloneDeep(newData);
        this.tabData = [];
        this.deviceInfo = [];
        if (data.length) {
          data.forEach(item => {
            item.deviceList.forEach(dev => {
              this.deviceInfo.push(dev.deviceToken);
              this.tabData.push({
                ...item,
                device: {
                  name: dev.deviceName,
                  token: dev.deviceToken,
                  ...dev,
                  deviceType: {
                    ...item,
                    name: item.deviceTypeName,
                    token: item.deviceTypeToken
                  }
                }
              });
            });
          });
        }
        // if (data.length) {
        //   data.map(item => {
        //     // item.feedCount = item.feedCount;
        //     // item.tailCount = item.tailCount;
        //     // item.description = item.description;
        //     // item.partCount = item.partCount;
        //     // item.toolingCount = item.toolingCount;
        //     // item.toolingName = item.toolingName;
        //     item.deviceList.forEach(dev => {
        //       let a = [];
        //       a = [item.deviceTypeToken];
        //       a.push(dev.deviceToken);
        //       this.deviceInfo.push(a);
        //     });
        //   });
        //   console.log("deviceInfo :>> ", this.deviceInfo);
        //   console.log("data :>> ", data);
        //   this.tabData = data;
        // } else {
        //   this.tabData = [];
        //   this.deviceInfo = [];
        // }
      },
      // immediate: true
      deep: true
    }
  },
  mounted() {
    console.log("Equipment :>> ");
  },
  methods: {
    handDelete(row, rowIndex) {
      this.tabData.splice(rowIndex, 1);
      this.deviceInfo.forEach((item, index) => {
        if (row.device.token == item) {
          this.deviceInfo.splice(index, 1);
        }
      });
      // this.$forceUpdate();
      this.is_cascader = Math.random();
    },
    // 设备
    devCascader(val) {
      let form = {
        feedCount: "",
        tailCount: "",
        description: "",
        partCount: "",
        toolingCount: "",
        toolingName: ""
      };
      const arr = [];
      this.treedata.forEach(item => {
        val.forEach(t => {
          if (item.device.token == t) {
            arr.push({
              ..._.cloneDeep(item),
              ...form
            });
          }
        });
      });
      if (val.length > this.tabData.length) {
        arr.forEach(item => {
          const is = this.tabData
            .map(t => t.device.token)
            .includes(item.device.token);
          if (!is) {
            this.tabData.push({
              ...item
            });
          }
        });
      } else {
        this.tabData.forEach((item, index) => {
          const is = val.includes(item.device.token);
          if (is) {
          } else {
            this.tabData.splice(index, 1);
          }
        });
      }
    }
  }
};
</script>

<style></style>
